$(document).ready(function() {
    // 点击发送按钮或按下回车键发送消息
    $('#send-button').click(sendMessage);
    $('#user-input').keypress(function(event) {
        if (event.key === "Enter") {
            sendMessage();
        }
    });

    async function sendMessage() {
        const userInput = $('#user-input').val();
        if (!userInput) return;

        // 显示用户消息
        displayMessage(userInput, 'user');

        // 清空输入框
        $('#user-input').val('');

        // 显示 GPT 正在思考的消息
        const thinkingMessageId = displayMessage("正在思考...", 'gpt');

        try {
            // 发送请求到 Flask 后端
            const response = await $.ajax({
                url: '/xiaoCheng/chat',
                method: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({ message: userInput }),
            });

            // 撤回"正在思考..."，并显示 GPT 的真实回答
            updateMessage(thinkingMessageId, response.data);

        } catch (error) {
            // 撤回"正在思考..."，显示错误原因
            updateMessage(thinkingMessageId, "抱歉，出现错误：" + error.statusText);
        }
    }

    // 显示消息并返回消息ID
    function displayMessage(message, sender) {
        const messageDiv = $('<div></div>')
            .text(message)
            .addClass(sender === 'user' ? 'user-message' : 'gpt-message');
        $('#chat-box').append(messageDiv);
        $('#chat-box').scrollTop($('#chat-box')[0].scrollHeight); // 滚动到最新消息
        return messageDiv; // 返回消息元素以便后续更新
    }

    // 更新消息内容
    function updateMessage(messageDiv, newMessage) {
        $(messageDiv).text(newMessage);
    }
});
